webpack

默认入口时./src/index.js,打包是dist/main.js

Asset Modules | webpack

In webpack 5 we can use "Asset Modules" to load common files like "json", "png" etc. See for more info: https://webpack.js.org/guides/asset-modules/

{
    test: /\.json$/,
    type: 'asset/resource',
    generator: {
        filename: '[name][ext][query]'
    }
}

public path

Public Path | webpack

output:{
    publicPath: '/', // 能够访问静态资源
}

在开发插件的时候遇到[AeroxianのBlog (browser extionsion)](https://aeroxian.github.io/minifrontendproject/43 browser extenstion.html)

开发插件的配置

const path = require('path');
module.exports = {
    entry:{
        app: "./src/app.ts"
    },
    output:{
        publicPath: '/', // 能够访问静态资源
        path: path.resolve(__dirname, 'dist'),
        assetModuleFilename: 'images/[name][ext][query]',
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.json$/,
                type: 'asset/resource',
                generator: {
                    filename: '[name][ext][query]'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    }
}